<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/header/header.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-收货地址</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li class="active">收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li @click='person_integral'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="right_box fl">
                <div class="address">
                    <div class="add_address">
                        <div class="add_btn fl cursor" @click='add_btn'>
                            新增收货地址
                        </div>
                        <span class="have_tips fl">已创建{{address_list.length}}条收货地址，还能创建{{10-address_list.length}}条地址</span>

                    </div>
                    <div class="address_item fl" v-for='(item,index) in address_list' :key="item.index">
                        <div class="icon_box">
                            <div class="bianji cursor fl" @click='getUserAddressById(item.id,item.isDefault)'><img src="../images/icon_bianji.png"
                                    alt=""></div>
                            <div class="del_0 cursor fl" @click='deleteUserAddressById(item.id)'><img src="../images/icon_del_0.png"
                                    alt=""></div>
                        </div>


                        <div class="add_item">
                            <div class="add_tit fl">收货人：</div>
                            <div class="add_detail fl"> {{item.consigneeRealname}} </div>
                        </div>
                        <div class="add_item">
                            <div class="add_tit fl">所在地区：</div>
                            <div class="add_detail fl"> {{item.provinceName}} {{item.cityName}} {{item.districtName}}
                            </div>
                        </div>
                        <div class="add_item">
                            <div class="add_tit fl">详细地址：</div>
                            <div class="add_detail fl"> {{item.consigneeAddress}} </div>
                        </div>
                        <div class="add_item">
                            <div class="add_tit fl">手机：</div>
                            <div class="add_detail fl"> {{item.consigneeMobilePhone}} </div>
                        </div>
                        <div class="add_item">
                            <div class="add_tit fl">固定电话：</div>
                            <div class="add_detail fl">{{item.consigneePhone}} </div>
                        </div>
                        <div class="add_item">
                            <div class="add_tit fl">电子邮箱：</div>
                            <div class="add_detail fl">{{item.email}} </div>
                        </div>
                        <div class="default" v-if='item.isDefault==1'>默认</div>
                        <div class="default" v-else='item.isDefault==0' @click='setDefaultUserAddressById(index,item.id)'>设置为默认</div>
                    </div>
                </div>
            </div>


            <div class="add_popup" v-show='add_popup'>
                <div class="add_popup_tit">
                    <span class="fl">新增收货地址</span>
                    <div class="fr close_x" @click='close_x'>
                        <img src="../images/close_x.png" alt="">
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span>*</span> 所在地区
                    </div>
                    <div class="add_write_input fl">
                        <!-- <select class="check_address" v-model="provice" id="pid" @change="gradeChange($event)">
                            <option v-for='(item,index) in add_list' :value='item.id'>{{item.areaName}}</option>
                        </select>
                        <select class="check_address" id="city" @change="cityChange()">
                            <option v-for='(item,index) in city_list' :value='item.id'>{{item.areaName}}</option>
                        </select>
                        <select class="check_address" id="area" @change="areaChange()">
                            <option v-for='(item,index) in area_list' :value='item.id'>{{item.areaName}}</option>
                        </select> -->
                        <select class="check_address" v-model="provice" id="pid" @change="gradeChange($event)">
                            <option v-for='(item,index) in shengs' :value='item.id'>{{item.areaName}}</option>
                        </select>
                        <select class="check_address" v-model="chengshi" id="city" @change="cityChange($event)">
                            <option v-for='(item,index) in chengshis' :areaName='item.areaName' :value='item.id'>{{item.areaName}}</option>
                        </select>
                        <select class="check_address" v-model="zhen" id="area" @change="areaChange($event)">
                            <option v-for='(item,index) in sanji' :value='item.id'>{{item.areaName}}</option>
                        </select>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span>*</span> 收货人
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="consigneeRealname" clearable>
                        </el-input>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span>*</span> 详细地址
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="consigneeAddress" clearable>
                        </el-input>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span>*</span> 手机号码
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="consigneeMobilePhone" clearable>
                        </el-input>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span>*</span> 固定号码
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="consigneePhone" clearable>
                        </el-input>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span></span> 邮箱地址
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="email" clearable>
                        </el-input>
                        <p>用来接收订单提醒邮件，便于您及时了解订单状态</p>
                    </div>
                </div>
                <div class="write_item">
                    <div class="add_write_tit fl">
                        <span></span> 地址别名
                    </div>
                    <div class="add_write_input fl">
                        <el-input placeholder="请输入内容" v-model="consigneeAddressAlias" clearable class="fl">
                        </el-input>
                        <div class="commonly_address fl">
                            建议填写常用名称
                            <span class="add_box">家里</span>
                            <span class="add_box">父母家</span>
                            <span class="add_box">公司</span>
                        </div>
                    </div>
                </div>

                <div class="address_popup_btn" @click='saveUserAddress(isDefault)'>
                    保存收货地址
                </div>
            </div>

        </div>





        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>
    </div>

    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script src='../js/city.js'></script>
    <script type="text/babel">


        var app = new Vue({
            el: '#app',
            data() {
                return {
                    address_list:'',
                    // nav
                    add_popup:false,
                    car_active:false,
                    groups:3,
                    consigneeAddressAlias:'',
                    consigneeRealname:'',
                    consigneeMobilePhone:'',
                    consigneePhone:'',
                    consigneeAddress:'',
                    email:'',
                    province_id:'110000',
                    city_id:'110100',
                    area_id:'110101',
                    province_text:'北京',
                    city_text:'北京市',
                    area_text:'东城区',
                    add_list:'',
                    city_list:'',
                    area_list:'',
                    add_id:'',
                    city_switch:true,
                    isDefault:0,
                    // 省市区回显问题
                    chengshis:[],
                    chengshi:'',
                    sanji:[],
                    provice:'',
                    shengs:[],
                    zhen:''
                    
                };
            },
            created() {
                
            },
            mounted() {
                this.userAddress()
                this.add_list = getCity().data.list
                for (let i = 0; i < this.add_list.length; i++) {
                    let cs = {};
                    cs.areaName = this.add_list[i].areaName;
                    cs.id = this.add_list[i].id;
                    cs.childList = this.add_list[i].childList;
                    this.shengs.push(cs);
                }
                console.log(getCity())
                // for()
            },
        
            methods: {
                // 三级联动
                gradeChange(event){ 
                    this.chengshis = [];
                    this.provice = event.target.value;
                    for(let sh in this.add_list) {
                        for(let shis in this.add_list[sh].childList) {
                            if(this.add_list[sh].id == this.provice) {
                                let cs = {};
                                cs.areaName = this.add_list[sh].childList[shis].areaName;
                                cs.id = this.add_list[sh].childList[shis].id;
                                cs.childList = this.add_list[sh].childList[shis].childList;
                                this.chengshis.push(cs);
                            }
                        }
                    }
                    var objS = document.getElementById("pid"); 
                    var province = objS.options[objS.options.selectedIndex].innerText
                    app.province_id = this.provice
                    app.province_text = province
              
                    
                },
                cityChange(evnet){
                    var citys = document.getElementById("city")
                    this.sanji = [];
                    this.chengshi = event.target.value;
                    for(let sh in this.chengshis) {
                        for(let shis in this.chengshis[sh].childList) {
                            if(this.chengshis[sh].id == this.chengshi) {
                                let cs = {};
                                cs.areaName = this.chengshis[sh].childList[shis].areaName;
                                cs.id = this.chengshis[sh].childList[shis].id;
                                this.sanji.push(cs);
                            }
                        }
                    }
                    var city = citys.options[citys.options.selectedIndex].innerText
                    app.city_id = this.chengshi
                    app.city_text = city

                },
                areaChange(){
                    var areas = document.getElementById("area")
                    var area_value = areas.options[areas.options.selectedIndex].value 
                    var area = areas.options[areas.options.selectedIndex].innerText
                    app.area_id = area_value
                    app.area_text = area
                },
                // 获取省市区
                // getArea(){
                //     axios({
                //         method:"POST",
                //         url:base_url + "/area/getArea",
                //         data:Qs.stringify({

                //         }),
                //         headers:{
                //             'Content-Type':'application/x-www-form-urlencoded',
                //             "TOKEN": localStorage.getItem("wACCESS_TOKEN")
                //         }
                //     })
                //     .then(function (res) {
                //         app.add_list = res.data.data.list
                //         console.log(res.data.data.list)
                //         app.shengs = [];
                //         for(let d in res.data.data.list) {
                //             let sf = {}
                //             sf.areaName = res.data.data.list[d].areaName
                //             sf.id = res.data.data.list[d].id
                //             app.shengs.push(sf)
                //         }
                //         app.city_list = app.add_list[0].childList
                //         app.area_list = app.city_list[0].childList
                //         app.city_switch = true
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
                // },
                // 地址列表
                userAddress(){
                    axios({
                        method:"POST",
                        url:base_url + "/userAddress/list",
                        data:Qs.stringify({

                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN": localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.address_list = res.data.data.list.list
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 删除地址
                deleteUserAddressById(id){
                    axios({
                        method:"POST",
                        url:base_url + "/userAddress/deleteUserAddressById",
                        data:Qs.stringify({
                            id:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.userAddress()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 新增收货地址
                saveUserAddress(id){
                    app.city_switch = true
                    if (this.consigneeMobilePhone=='') {
                        app.$message.error("请输入手机号");
                    }else if (!/^1(3|4|5|7|8)\d{9}$/.test(this.consigneeMobilePhone)) {
                        app.$message.error("请输入正确手机号");
                    }else{
                        axios({
                        method:"POST",
                        url:base_url + "/userAddress/saveUserAddress",
                        data:{
                            id: this.add_id,
                            provinceId: this.province_id,
                            provinceName: this.province_text,
                            cityId: this.city_id,
                            cityName: this.city_text,
                            districtId: this.area_id,
                            districtName: this.area_text,
                            consigneeRealname: this.consigneeRealname,
                            consigneeMobilePhone: this.consigneeMobilePhone,
                            consigneePhone: this.consigneePhone,
                            consigneeAddress: this.consigneeAddress,
                            consigneeAddressAlias: this.consigneeAddressAlias,
                            // consigneeZip: "302588",
                            email: this.email,
                            isDefault:app.isDefault,
                            sort:0
                        },
                        headers:{
                            'Content-Type':'application/JSON',
                            "TOKEN":localStorage.getItem("wACCESS_TOKEN")
                        }
                        })
                        .then(function (res) {
                            app.add_popup = false
                            
                            // objS.options[2].value = objS.cityName; 
                            app.userAddress()
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    }
                },
                close_x(){
                    app.add_popup = false
                },
                // 设置为默认地址
                setDefaultUserAddressById(index,id){
                    axios({
                        method:"POST",
                        url:base_url + "/userAddress/setDefaultUserAddressById",
                        data:Qs.stringify({
                            id:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.userAddress()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取地址信息
                getUserAddressById(id,isDefault){
                    if (app.city_switch) {
                        if (isDefault==0) {
                            app.isDefault = 0
                        } else if (isDefault==1) {
                            app.isDefault = 1
                        } else{
                            app.isDefault = 0
                        }
                        axios({
                        method:"POST",
                        url:base_url + "/userAddress/getUserAddressById",
                        data:Qs.stringify({
                            id:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem("wACCESS_TOKEN")
                        }
                    })
                    .then(function (res) {
                        app.add_popup = true
                        var object = res.data.data.object
                        app.consigneeAddressAlias = object.consigneeAddressAlias
                        app.consigneeRealname = object.consigneeRealname
                        app.consigneeMobilePhone = object.consigneeMobilePhone
                        app.consigneePhone = object.consigneePhone
                        app.consigneeAddress = object.consigneeAddress
                        app.email = object.email
                        app.province_id = object.provinceId
                        app.city_id = object.cityId
                        app.area_id = object.districtId
                        app.province_text = object.provinceName
                        app.city_text = object.cityName
                        app.area_text = object.districtName
                        app.add_id = object.id
                        
                        app.chengshis = [];
                        for(let sh in app.add_list) {
                            for(let shis in app.add_list[sh].childList) {
                                if(app.add_list[sh].id == object.provinceId) {
                                    let cs = {};
                                    cs.areaName = app.add_list[sh].childList[shis].areaName;
                                    cs.id = app.add_list[sh].childList[shis].id;
                                    cs.childList = app.add_list[sh].childList[shis].childList;
                                    app.chengshis.push(cs);
                                }
                            }
                        }
                        
                        app.chengshis = [];
                        for(let sh in app.add_list) {
                            for(let shis in app.add_list[sh].childList) {
                                if(app.add_list[sh].id == object.provinceId) {
                                    let cs = {};
                                    cs.areaName = app.add_list[sh].childList[shis].areaName;
                                    cs.id = app.add_list[sh].childList[shis].id;
                                    cs.childList = app.add_list[sh].childList[shis].childList;
                                    app.chengshis.push(cs);
                                }
                            }
                        }
                        app.provice = object.provinceId
                        app.chengshi = object.cityId
                        app.zhen = object.districtId
                        app.sanji=[]
                        for(let sh in app.chengshis) {
                            for(let shis in app.chengshis[sh].childList) {
                                if(app.chengshis[sh].id == object.cityId) {
                                    let cs = {};
                                    cs.areaName = app.chengshis[sh].childList[shis].areaName;
                                    cs.id = app.chengshis[sh].childList[shis].id;
                                    app.sanji.push(cs);
                                }
                            }
                        }
                        // 设置选中的值
                        // for(let i=0; i<objS.options.length; i++){
                        //     if( objS.options[i].innerHTML == app.province_text ){
                        //         objS.options[i].selected = true; 
                        //         app.city_list = app.add_list[i].childList
                        //         for(var j=0; j < app.city_list.length; j++){
                        //             if( app.city_list[j].areaName == app.city_text ){
                        //                 app.city_list = app.add_list[i].childList
                        //                 citys.options[j].selected = true; 
                        //                 app.area_list = app.city_list[j].childList
                        //                 for(var q=0; q<areas.options.length; q++){
                        //                     if( areas.options[q].innerHTML == app.area_text){
                        //                         areas.options[q].selected = true; 
                        //                         break
                        //                     } 
                        //                 }
                        //                 break
                        //             } 
                        //         }
                        //         break
                        //     }
                        // }
                        // app.add_select()
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    }
                },
                // 地址默认选中
                // add_select(){
                //     var objS = document.getElementById("pid")
                //     var citys = document.getElementById("city")
                //     var areas = document.getElementById("area")
                //     var objS_index,citys_index,areas_index
                //     //设置选中的值
                //     for(let i=0; i<objS.options.length; i++){
                //         if( objS.options[i].innerHTML == app.province_text ){
                //             objS.options[i].selected = true; 
                //             for(var j=0; j < app.city_list.length; j++){
                //                 if( citys.options[j].innerHTML == app.city_text ){
                //                     citys.options[j].selected = true; 
                //                     for(var q=0; q<areas.options.length; q++){
                //                         if( areas.options[q].innerHTML == app.area_text){
                //                             areas.options[q].selected = true; 
                //                             break
                //                         } 
                //                     }
                //                     break
                //                 } 
                //             }
                //             break
                //         }
                //         // citys.options[citys_index].selected = true; 
                //         // areas.options[areas_index].selected = true; 
                //     }
                // },


                // 显示购物车               
                go_shop_car(){
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                add_btn(){
                    if (app.address_list.length==10) {
                    }else{
                        this.add_popup = true
                        app.consigneeAddressAlias = ''
                        app.consigneeRealname = ''
                        app.consigneeMobilePhone = ''
                        app.consigneePhone = ''
                        app.consigneeAddress = ''
                        app.email = ''
                        app.province_id = '110000'
                        app.city_id = '110100'
                        app.area_id = '110101'
                        app.province_text = '北京'
                        app.city_text = '北京市'
                        app.area_text = '东城区'
                        app.add_id = ''
                    }
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_center(){
                    window.location.href='person_center.html?index=' + 0
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_integral(){
                    window.location.href='person_integral_order.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },
                
                
            }
        })
        
    </script>
</body>

</html>